<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="统计时间">
					<daterange-picker
						v-model:startTime="queryParams.date"
						v-model:endTime="queryParams.date2"
                        type="daterange"
                        valueFormat="YYYY-MM-DD"
					/>
				</el-form-item>
                <el-form-item label="数据范围">
					<el-select class="w-[280px]" v-model="queryParams.data_range">
						<el-option label="全部" :value="1"/>
						<el-option label="平台需求" :value="2"/>
						<el-option label="CRM需求——全部" :value="3"/>
                        <el-option label="CRM需求——公司" :value="4"/>
					</el-select>
				</el-form-item>
                <el-form-item label="数据展示形式">
					<el-select class="w-[280px]" v-model="queryParams.show_form" @change="dataChange">
						<el-option label="表格" value="common_table"/>
						<el-option label="桑基图" value="mulberry_table"/>
					</el-select>
				</el-form-item>
                <el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
            </el-form>
        </el-card>
        <!-- 表格信息 -->
		<el-card class="!border-none" shadow="never">
            <div class="w-1/2" v-if="queryParams.show_form == 'common_table'">
                <el-table size="large" v-loading="loading" :data="list">
                    <el-table-column label="需求进度" prop="progress_master_desc" min-width="180" />
                    <el-table-column label="进度详情" prop="progress_sub_desc" min-width="180" />
                    <el-table-column label="数量" prop="count" min-width="120" />
                    <el-table-column label="占比" prop="point_num" min-width="120">
                        <template #default="{ row }">
                            <span>{{ row.point_num }}%</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="" v-if="all_count == 0 && queryParams.show_form == 'mulberry_table'">暂无数据</div>
            <v-charts
                v-if="queryParams.show_form == 'mulberry_table'"
                ref="sankeyChart"
                :style="{height: `680px`}"
                :option="options"
                :autoresize="true"
            />
        </el-card>
    </div>
</template>
<script lang="ts" setup name="demandProgress">
    import {progressStatistics } from '@/api/demand/lists';
    import { usePaging } from '@/hooks/usePaging';
    import vCharts from 'vue-echarts'
    import { timeFormat } from '@/utils/util'
    let queryParams = reactive({
        date: '',
        date2: '',
        data_range: 1,
        show_form: 'common_table'
    });
    let nye = timeFormat(new Date().getTime())
    queryParams.date = nye;
    queryParams.date2 = nye;
    console.log(nye)
    const resetPage = () => {
        getLists()
    }
    const resetParams = () => {
        queryParams.date = nye;
        queryParams.date2 = nye;
        queryParams.data_range = 1;
        queryParams.show_form = 'common_table';
        getLists()
    }
    const loading = ref(true)
    const list:any = ref([])
    const sankey_info = ref({

    })

    const sankeyChart = ref()
    const dataChange = (e:any) => {
        console.log(e)
        getLists()
    }
    const all_count = ref(0)
    const getLists = async () => {
        loading.value = true;
        const res = await progressStatistics(queryParams);
        console.log(res)
        if (queryParams.show_form == 'common_table') {
            loading.value = false;
            list.value = res;
        } else {
            let data_name:any = []
            let nodes:any = []
            all_count.value = res.count;
            if (res.count) {
                // data_name.push({'name': res.name});
                data_name.push({'name': `${res.name}(${res.count}，${res.point_num}%)`});
            }
            res.child_list.forEach((item:any)=>{
                if (item.count != 0) {
                    // data_name.push({'name': item.name});
                    data_name.push({'name': `${item.name}(${item.count}，${item.point_num}%)`});
                    nodes.push({
                        // source: res.name,
                        // target: item.name,
                        source: `${res.name}(${res.count}，${res.point_num}%)`,
                        target: `${item.name}(${item.count}，${item.point_num}%)`,
                        value: item.count
                    })
                }
                item.child_list.forEach((itemC:any)=>{
                    if (itemC.count != 0) {
                        // data_name.push({'name': itemC.name});
                        data_name.push({'name': `${itemC.name}(${itemC.count}，${itemC.point_num}%)`});
                        nodes.push({
                            // source: item.name,
                            // target: itemC.name,
                            source: `${item.name}(${item.count}，${item.point_num}%)`,
                            target: `${itemC.name}(${itemC.count}，${itemC.point_num}%)`,
                            value: itemC.count
                        })
                    }
                })
            })

            console.log(data_name)
            console.log(nodes)
            options.series.data = data_name;
            options.series.links = nodes;
            sankeyChart.value?.setOption({
                ...options
            })
        }
        
    }

    const options:any = reactive({
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: {
            type: 'sankey',
            layout: 'none',
            emphasis: {
                focus: 'adjacency'
            },
            data: [],
            links: [],
            levels: [
                {
                    depth: 0,
                    itemStyle: {
                        color: '#fbb4ae'
                    },
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                },
                {
                    depth: 1,
                    itemStyle: {
                        color: '#b3cde3'
                    },
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                },
                {
                    depth: 2,
                    itemStyle: {
                        color: '#ccebc5'
                    },
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                },
                {
                    depth: 3,
                    itemStyle: {
                        color: '#decbe4'
                    },
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                }
            ],
            lineStyle: {
                curveness: 0.5
            }
        }
    })

    getLists()
</script>